<template>
	<view class="">
		<view class="cells">
			<view v-for="(item, index) in listData" :key="index" class="cell" @tap="cellClick" :data-index="index">
				<view class="cell__hd"><image :id="'image' + index" mode="aspectFill" :src="item.images" /></view>

				<view class="cell__bd">
					<view class="name">{{ item.title }}</view>
					<view class="des">{{ item.description }}</view>
				</view>
			</view>
		</view>

		<view class="cart"><image src="/static/images/icon/shop-cart.png"></image></view>

		<view
			v-for="(item, index) in dotList"
			:key="item.id"
			class="dot"
			:style="{ visibility: item.show ? 'visible' : 'hidden', left: item.left + 'px', top: item.top + 'px', transform: 'scale(' + item.scale + ')' }"
		>
			<image :src="dotImage"></image>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			dotImage: '',
			dotList: [],
			listData: [
				{
					title: '这个绝望的世界没有存在的价值，所剩的只有痛楚',
					description: '思念、愿望什么的都是一场空，被这种虚幻的东西绊住脚，什么都做不到',
					images: '/static/images/swipe/1.png'
				},
				{
					title: '我早已闭上了双眼，我的目的，只有在黑暗中才能实现',
					description: '有太多的羁绊只会让自己迷惘，强烈的想法和珍惜的思念，只会让自己变弱',
					images: '/static/images/swipe/2.png'
				},
				{
					title: '感受痛苦吧，体验痛苦吧，接受痛苦吧，了解痛苦吧。不知道痛苦的人是不会知道什么是和平',
					description: '但我已经在无限存在的痛苦之中，有了超越凡人的成长。从凡人化为神',
					images: '/static/images/swipe/3.png'
				},
				{
					title: '我决定了 从今天起 我要选择一条不会让自己后悔的路 我要创造出属于自己的忍道 ',
					description: '我才不要在这种时候放弃,即使当不成中忍,我也会通过其他的途径成为火影的,这就是我的忍道',
					images: '/static/images/swipe/4.png'
				},
				{
					title: '为什么你会这么弱？就是因为你对我的仇恨...还不够深...',
					description: '你没有杀的价值...愚蠢的弟弟啊...想要杀死我的话...仇恨吧！憎恨吧！然后丑陋地活下去吧！逃吧 逃吧...然后苟且偷生下去吧！',
					images: '/static/images/swipe/5.png'
				},
				{
					title: '对于忍者而言怎样活着无所谓，怎样死去才是最重要的...',
					description: '所谓的忍者就是忍人所不能忍，忍受不了饿肚子，而沦落为盗贼的人，根本不能称之为忍者',
					images: '/static/images/swipe/6.png'
				},
				{
					title: '在这世上，有光的地方就必定有黑暗，所谓的胜者，也就是相对败者而言',
					description: '若以一己之思念要维持和平，必会招致战争，为了守护爱，变回孕育出恨。此间因果，是无法斩断的。现实就是如此',
					images: '/static/images/swipe/7.png'
				},
				{
					title: '世界上...只有没有实力的人,才整天希望别人赞赏...',
					description: '很不巧的是我只有一个人，你说的那些家伙们已经一个都没有了，已经??全部被杀死了',
					images: '/static/images/swipe/8.png'
				},
				{
					title: '千代婆婆，父亲大人和母亲大人回来了吗？？？',
					description: '明明剩下的只有痛苦了，既然你这么想活命，我就方你一条生路好了。不过，你中的毒不出三日就会要了你的命',
					images: '/static/images/swipe/9.png'
				},
				{
					title: '艺术就是爆炸！！~~ 嗯 ~~ 芸术は爆発します！',
					description: '我的艺术就是爆炸那一瞬，和蝎那种让人吃惊的人偶喜剧从根本上就是不同的！',
					images: '/static/images/swipe/10.png'
				}
			]
		}
	},
	onLoad() {
		this.$nextTick(() => {
			uni.createSelectorQuery()
				.select('.cart')
				.boundingClientRect(res => {
					console.log('onLoad: ', res) //left: 310,top: 538
					this.destination = res
				})
				.exec()
		})
	},
	methods: {
		cellClick(e) {
			console.log(e.currentTarget.dataset.index)

			let { index } = e.currentTarget.dataset
			this.dotImage = this.listData[index].images

			if (this.dotList.length >= 10) {
				this.dotList = []
			}

			const query = uni.createSelectorQuery()

			query
				.select(`#image${index}`)
				.boundingClientRect(res => {
					let index = this.dotList.length

					this.dotList = this.dotList.concat({
						id: +new Date(),
						top: res.top + 20,
						left: res.left - 20,
						scale: 1,
						show: true
					})

					setTimeout(() => {
						let destination = this.destination || {}

						let dotList = this.dotList

						dotList[index].top = destination.top
						dotList[index].left = destination.left
						dotList[index].scale = 0.5

						this.dotList = dotList
					}, 30)

					setTimeout(() => {
						let dotList = this.dotList
						if (!(dotList && dotList[index])) return

						// dotList[index].show = false
						// this.dotList = dotList
						this.$set(dotList[index], 'show', false)
					}, 470)
				})
				.exec()
		}
	}
}
</script>

<style lang="scss">
@import '~@/common/css/variables';

page {
	padding-bottom: 1rpx;
}

.cells {
	background: #ffffff;
	margin: 20rpx 0;

	.cell {
		display: flex;
		padding: 20rpx;

		&:not(:last-child) {
			border-bottom: 1rpx solid $lineColor;
		}

		&__hd {
			font-size: 0;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 12rpx;
			}
		}

		&__bd {
			flex: 1;

			.name {
				@include line(2);
				font-size: 28rpx;
				margin-bottom: 12rpx;
			}

			.des {
				@include line(2);
				color: $mainBlack2;
				font-size: 24rpx;
			}
		}
	}
}

.cart {
	position: fixed;
	bottom: 30rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: $shadow;
	padding: 24rpx;
	box-sizing: border-box;
	z-index: 9998;
	image {
		width: 100%;
		height: 100%;
	}
}

.dot {
	position: fixed;
	border-radius: 50%;
	z-index: 9999;
	transform-origin: 50% 50%;
	transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important; //cubic-bezier(0.3, -0.2, 1, 0),cubic-bezier(0, 0.3, 0, 1)
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
}
</style>
